<!-- 新增/修改弹框 -->
<template>
  <!-- 新增/修改弹窗 -->
  <el-dialog
    v-model="visible"
    :width="screenWidth"
    :fullscreen="mobile === 'mobile'"
    :title="dialogExamine.title"
    draggable
    close-icon="CloseBold"
    @close="closeDialog"
  >
    <el-descriptions
      v-loading="loading"
      class="margin-top"
      :column="detailSpan"
      :size="'large'"
      border
    >
      <el-descriptions-item label-align="right">
        <template #label>
          <div class="cell-item">流水号</div>
        </template>
        {{ dataInfo.serialNumber }}
      </el-descriptions-item>
      <el-descriptions-item label-align="right">
        <template #label>
          <div class="cell-item">项目名称</div>
        </template>
        {{ dataInfo.username }}
      </el-descriptions-item>
      <el-descriptions-item label-align="right">
        <template #label>
          <div class="cell-item">项目编号</div>
        </template>
        {{ dataInfo.username }}
      </el-descriptions-item>

      <el-descriptions-item label-align="right">
        <template #label>
          <div class="cell-item">账户名称</div>
        </template>
        {{ dataInfo.username }}
      </el-descriptions-item>

      <el-descriptions-item label-align="right">
        <template #label>
          <div class="cell-item">银行账号</div>
        </template>
        {{ dataInfo.bankNo }}
      </el-descriptions-item>

      <el-descriptions-item label-align="right">
        <template #label>
          <div class="cell-item">开户银行</div>
        </template>
        {{ BankTypeTypesFilter(dataInfo.bankType) }}
      </el-descriptions-item>

      <el-descriptions-item label-align="right">
        <template #label>
          <div class="cell-item">开户提交人</div>
        </template>
        {{ dataInfo.username }}
      </el-descriptions-item>

      <el-descriptions-item label-align="right">
        <template #label>
          <div class="cell-item">开户申请日期</div>
        </template>
        {{ dataInfo.username }}
      </el-descriptions-item>
    </el-descriptions>
    <el-form
      ref="examinFormRef"
      v-loading="loading"
      :model="formData"
      :rules="rules"
      label-width="200"
      style="margin-top: 20px"
      size=""
    >
      <el-row justify="start" class="d_left">
        <el-col :span="itemSpan" class="">
          <el-form-item label="开设银行账号" prop="bankNo">
            <el-input v-model="formData.bankNo" placeholder="请输入银行账号" />
          </el-form-item>
        </el-col>
        <el-col :span="itemSpan" class="">
          <el-form-item label="银行是否对账户设置特殊标识" prop="bankMark">
            <el-select v-model="formData.bankMark" placeholder="请选择">
              <el-option label="是" :value="true" />
              <el-option label="否" :value="false" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="itemSpan" class="">
          <el-form-item label="开户地址" prop="bankAddress">
            <el-input
              v-model="formData.bankAddress"
              placeholder="请输入账户开户地址"
            />
          </el-form-item>
        </el-col>

        <el-col :span="itemSpan" class="">
          <el-form-item label="工资专户余额(万元)" prop="balance">
            <el-input
              v-model="formData.balance"
              type="number"
              placeholder="请输入专户余额"
            />
          </el-form-item>
        </el-col>
        <el-col class="">
          <el-form-item label="审批意见" prop="checkStatus">
            <el-checkbox
              v-model="chenkeSuccess"
              label="审核成功"
              size="large"
              @change="handleCheckedChangeSuccess"
            />
            <el-checkbox
              v-model="chenkeFail"
              label="审核失败"
              size="large"
              @change="handleCheckedChangeFail"
            />
            <!-- <el-checkbox-group
              v-model="formData.checkStatusList"
              :min="0"
              :max="1"
            >
              <el-checkbox :label="2">审核失败</el-checkbox>
              <el-checkbox :label="3">审核成功</el-checkbox>
            </el-checkbox-group> -->
          </el-form-item>
        </el-col>
        <el-col class="">
          <el-form-item label="审批意见说明" prop="checkReason">
            <el-input
              v-model="formData.checkReason"
              :rows="2"
              type="textarea"
              placeholder="请说明其原因"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <template #footer>
      <div class="dialog_footer">
        <el-button type="primary" :loading="loading" @click="handleSubmit"
          >确认提交</el-button
        >
        <el-button @click="closeDialog()">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive, nextTick, computed } from "vue";
import { MessageParamsWithType, ElForm, FormRules } from "element-plus";
import { getDicts } from "@/store/modules/dict";
import { useScreen } from "@/store/modules/screen";
import { examineProjectAccount } from "@/api/system/projectspecialaccount/index";
import {
  ProjectAccount,
  ProjectAccountExamineForm,
} from "@/api/system/projectspecialaccount/types";

const screenStore = useScreen();
const mobile = computed(() => screenStore.device);
const screenWidth = ref(900);
const itemSpan = ref(12);
const detailSpan = ref(2);
const checkStatus = ref([]);
const chenkeSuccess = ref(false);
const chenkeFail = ref(false);

function initScreen() {
  if (mobile.value === "mobile") {
    screenWidth.value = screenStore.screenWidth;
    itemSpan.value = 24;
    detailSpan.value = 1;
  } else {
    screenWidth.value = 900;
    itemSpan.value = 12;
    detailSpan.value = 2;
  }
}

const props = defineProps({
  dialogExamine: {
    type: Object,
    default: () => ({
      visible: false,
      title: "",
      id: 0,
    }),
  },
  data: {
    type: Object,
    default: () => ({
      id: 0,
    }),
  },
});

const emit = defineEmits(["sendClose"]);
const loading = ref(false);
let visible = ref(props.dialogExamine.visible);
const dataInfo = ref(props.data);
const formData = reactive<ProjectAccountExamineForm>({
  bankMark: undefined,
  balance: 0,
  checkStatus: undefined,
  checkReason: "",
  checkStatusList: [],
});
const examinFormRef = ref(ElForm);
const BankTypeTypes = getDicts("bankTypeTypes"); //银行类别

const rules = reactive<FormRules<ProjectAccountExamineForm>>({
  bankNo: [{ required: true, message: "请输入银行账号", trigger: "blur" }],
  bankMark: [
    { required: true, message: "请选择是否对账户特殊标识", trigger: "blur" },
  ],
  balance: [{ required: true, message: "请输入工资专户余额", trigger: "blur" }],
  checkStatus: [{ required: true, message: "请勾选审批意见", trigger: "blur" }],
  checkReason: [{ required: true, message: "审批原因说明", trigger: "blur" }],
});

const handleCheckedChangeSuccess = (value: string) => {
  console.log(value);
  if (value) {
    chenkeFail.value = false;
    formData.checkStatus = 3;
  }
};
const handleCheckedChangeFail = (value: string) => {
  console.log(value);
  if (value) {
    chenkeSuccess.value = false;
    formData.checkStatus = 2;
  }
};

onMounted(async () => {
  initScreen();
});

/* 发送当前弹窗关闭 */
function sendClose() {
  emit("sendClose", "examine", true);
}

/**
 * 关闭弹窗
 */
function closeDialog() {
  visible.value = false;
  sendClose();
  resetForm();
}

/**
 * 重置表单
 */
function resetForm() {
  examinFormRef.value.resetFields();
  examinFormRef.value.clearValidate();
  formData.id = undefined;
}

/**
 * 项目表单提交
 */
function handleSubmit() {
  examinFormRef.value.validate((valid: any) => {
    if (valid) {
      loading.value = true;
      const id = dataInfo.value.id;
      if (id) {
        examineProjectAccount(id, formData)
          .then(
            (response: { success: boolean; msg: MessageParamsWithType }) => {
              if (response.success === true) {
                ElMessage.success(response.msg);
                closeDialog();
              } else {
                ElMessage.warning(response.msg);
              }
            }
          )
      }
    }
  });
}
/**银行名称 */
function BankTypeTypesFilter(val: string) {
  let temp = BankTypeTypes.filter(
    (item: { value: string }) => item.value === val
  );
  if (temp && temp[0]) {
    return temp[0].label;
  } else {
    return "";
  }
}
</script>

<style lang="scss" scoped>
.d_left {
  margin-left: 10px;
}
:deep(.el-form-item) {
  flex-wrap: wrap;
}

:deep(.el-input) {
  width: 80%;
}

:deep(.el-select) {
  width: 100%;
}

:deep(.el-input__wrapper) {
  width: 100%;
}

:deep(.el-form-item__label) {
  color: #696868;
  font-size: 13px;
}
</style>
